{% extends 'base.html' %}
{% load crm_tags %}
{% block body %}
    <div class="container col-lg-8 col-md-offset-2">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">报名入学表单</h3>
            </div>
            <div class="panel-body">
                {% if status != 1 %}
                    <span style="color: red">{{ customer_form.errors }}</span>
                    <form class="form-horizontal" role="form" onsubmit="return RegisterFormCheck()" method="post">{% csrf_token %}
                        {% for field in customer_form %}
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-2 control-label">{{ field.label }}:</label>
                                <div class="col-sm-10">
                                    {{ field }}
                                </div>
                            </div>
                        {% endfor %}
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">所报班级:</label>
                            <div class="col-sm-10">
                                {{ enroll_obj.enrolled_class }}
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">课程价格:</label>
                            <div class="col-sm-10">
                                {{ enroll_obj.enrolled_class.course.price }}
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">开班日期:</label>
                            <div class="col-sm-10">
                                {{ enroll_obj.enrolled_class.start_date }}
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">
                                <pre style="height: 600px;overflow: auto">{% render_enroll_contract enroll_obj %}</pre>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">
                                <input type="checkbox" name="contract_agreed"> 我已认真阅读协议并接受所有条款
                            </div>
                        </div>
                        <input type="submit" class="btn btn-info pull-right" value="提交">
                    </form>
                    <p style="margin-top: 50px">请上传身份证正反面照片：</p>

                {% else %}
                    <h2 style="text-align: center">报名成功！</h2>
                {% endif %}

                {% if status != 1 %}
                <form id="filedropzone" method="post" action="{{ request.path }}">
                          class="dropzone dz-clickable">{% csrf_token %}
                        <div class="dz-default dz-message">
                            <div class="dz-icon icon-wrap icon-circle icon-wrap-md">
                                <i class="fa fa-cloud-upload fa-3x"></i>
                            </div>
                            <div>
                                <p class="dz-text">把要提交的文件拖到这里</p>
                                <p class="text-muted">上传前请将代码打包成.zip格式</p>
                            </div>
                        </div>
                </form>
                {% endif %}
            </div>
        </div>
    </div>


{% endblock %}

{% block buttom-js %}
    <script>
        function RegisterFormCheck() {
            if ($("form :checkbox").prop('checked')) {

                if (($('#id_name').val().length == 0)) {
                    alert("用户名不能为空！");
                    return false
                }
                if (myDropzone.files.length < 2) {
                    alert("必须至少上传2张图片!");
                    return false
                }

                $("form").find("[disabled]").removeAttr("disabled");
                return true;
            }

            else {
                alert("未同意条款！");
                return false
            }
        }


        $(document).ready(function () {
            Dropzone.options.filedropzone = {
                url: "{{ request.path }}",
                paramName: "file", // The name that will be used to transfer the file
                maxFilesize: 3, // MB,
                addRemoveLinks: true,
                maxFiles: 2,
                uploadMultiple: true,
                accept: function (file, done) {
                if (file.name == "justinbieber.jpg") {
                        done("Naha, you don't.");
                    }
                    else {
                        done();
                    }
                }
            };


            Dropzone.autoDiscover = false;
            myDropzone = new Dropzone("#filedropzone");
            myDropzone.on("addedfile", function (file) {
                console.log("---------", file)
            });
        });
    </script>
{% endblock %}